<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->

<div class="ms-PeoplePicker ms-PeoplePicker--membersList">
  <label class="ms-Label">People picker</label>
  <div class="ms-PeoplePicker-searchBox">
    <input class="ms-PeoplePicker-searchField" type="text">
  </div>
  <div class="ms-PeoplePicker-results">
    <div class="ms-PeoplePicker-resultGroups">
      <div class="ms-PeoplePicker-resultGroup">
        <ul class="ms-PeoplePicker-resultList">
          <li class="ms-PeoplePicker-result">
            <div tabindex="0" role="button" class="ms-PeoplePicker-resultBtn">
              <div class="ms-Persona">
                <div class="ms-Persona-imageArea">
                  <div class="ms-Persona-initials ms-Persona-initials--darkBlue">RM</div>
                  <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
                </div>
                <div class="ms-Persona-presence"></div>
                <div class="ms-Persona-details">
                  <div class="ms-Persona-primaryText">Russel Miller</div>
                  <div class="ms-Persona-secondaryText">Sales</div>
                </div>
              </div>
            </div>
          </li>
          <li class="ms-PeoplePicker-result">
            <div tabindex="0" role="button" class="ms-PeoplePicker-resultBtn">
              <div class="ms-Persona">
                <div class="ms-Persona-imageArea">
                  <div class="ms-Persona-initials ms-Persona-initials--green">DF</div>
                  <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
                </div>
                <div class="ms-Persona-presence"></div>
                <div class="ms-Persona-details">
                  <div class="ms-Persona-primaryText">Douglas Fielder</div>
                  <div class="ms-Persona-secondaryText">Public Relations</div>
                </div>
              </div>
            </div>
          </li>
          <li class="ms-PeoplePicker-result">
            <div tabindex="0" role="button" class="ms-PeoplePicker-resultBtn">
              <div class="ms-Persona">
                <div class="ms-Persona-imageArea">
                  <div class="ms-Persona-initials ms-Persona-initials--blue">JF</div>
                  <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
                </div>
                <div class="ms-Persona-presence"></div>
                <div class="ms-Persona-details">
                  <div class="ms-Persona-primaryText">Jessica Fischer</div>
                  <div class="ms-Persona-secondaryText">Public Relations</div>
                </div>
              </div>
            </div>
          </li>
          <li class="ms-PeoplePicker-result">
            <div tabindex="0" role="button" class="ms-PeoplePicker-resultBtn">
              <div class="ms-Persona">
                <div class="ms-Persona-imageArea">
                  <div class="ms-Persona-initials ms-Persona-initials--black">GS</div>
                  <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
                </div>
                <div class="ms-Persona-presence"></div>
                <div class="ms-Persona-details">
                  <div class="ms-Persona-primaryText">Grant Steel (bask)</div>
                  <div class="ms-Persona-secondaryText">Public Relations</div>
                </div>
              </div>
            </div>
          </li>
          <li class="ms-PeoplePicker-result">
            <div tabindex="0" role="button" class="ms-PeoplePicker-resultBtn">
              <div class="ms-Persona">
                <div class="ms-Persona-imageArea">
                  <div class="ms-Persona-initials ms-Persona-initials--teal">HW</div>
                  <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
                </div>
                <div class="ms-Persona-presence"></div>
                <div class="ms-Persona-details">
                  <div class="ms-Persona-primaryText">Harvey Wallin</div>
                  <div class="ms-Persona-secondaryText">Delivery</div>
                </div>
              </div>
            </div>
          </li>
          <li class="ms-PeoplePicker-result">
            <div tabindex="0" role="button" class="ms-PeoplePicker-resultBtn">
              <div class="ms-Persona">
                <div class="ms-Persona-imageArea">
                  <div class="ms-Persona-initials ms-Persona-initials--purple">ML</div>
                  <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
                </div>
                <div class="ms-Persona-presence"></div>
                <div class="ms-Persona-details">
                  <div class="ms-Persona-primaryText">Marcus Lauer</div>
                  <div class="ms-Persona-secondaryText">Marketing</div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="ms-PeoplePicker-selected">
    <div class="ms-PeoplePicker-selectedHeader">
      <span class="ms-PeoplePicker-selectedCount"></span> newly added member<span>s</span>
    </div>
    <ul class="ms-PeoplePicker-selectedPeople"></ul>
  </div>
</div>